<template>
  <div id="app" name="app">
    <el-container>
      <!-- 顶部导航栏 -->
      <div class="topContainer">
        <div class="nav">
          <ul>
            <li>
              <router-link to="/">首页</router-link>
            </li>
            <li v-if="!store.getters.getUser">
              <el-button type="text" @click="login">登录</el-button>
              <span class="sep">|</span>
              <el-button type="text" @click="register=true">注册</el-button>
            </li>
            <li v-else>
              欢迎<el-button style="border: 0;" @click="showLogout">{{ this.username }} </el-button>
              <teleport to="body">
                <div v-if="visible" style="position: fixed;z-index: 9999; border-radius: 20px;background-color: #FFFFFF; padding-top: 20px; text-align: center; top: 50%; left: 50%; transform: translateX(-50%); width: 200px; height: 80px;">
                  <p>确定退出登录吗？</p>
                  <div style="text-align: center; margin: 10px 0 0 ;">
                    <button @click="logout" style="margin-right: 5px">确定</button>
                    <button @click="visible = false" style="margin-left: 5px;">取消</button>
                  </div>
                </div>
              </teleport>
<!--              <el-popover placement="top" width="180" v-model="visible" >-->
<!--                <p>确定退出登录吗？</p>-->
<!--                <div style="text-align: right; margin: 10px 0 0">-->
<!--                  <el-button size="small" type="text" @click="visible = false">取消</el-button>-->
<!--                  <el-button type="primary" size="small" @click="logout">确定</el-button>-->
<!--                </div>-->
<!--              </el-popover>-->
            </li>
            <li>
              <router-link to="/personal?from=4">我的订单</router-link>
            </li>
            <li>
              <router-link to="/personal?from=3">收藏</router-link>
            </li>
            <li>
              <router-link to="/personal">个人中心</router-link>
            </li>
            <li :class="getNum>0?'shopCart-full' : 'shopCart'">
              <router-link to="/shopCart">
                <el-icon>
                  <ShoppingCart/>
                </el-icon>
                购物车
                <span class="num">({{ getNum }})</span>
              </router-link>
            </li>
          </ul>
        </div>
      </div>
      <!--      顶部导航栏END-->
      <!--      登录注册-->
      <Login></Login>
      <Register :register="register" @formChild="isRegister"></Register>
      <!--      登陆注册END-->

      <!--      主区域-->
      <el-main>
        <router-view v-slot="{ Component }" v-if="routerState">
          <keep-alive>
            <component :is="Component" />
          </keep-alive>
        </router-view>
      </el-main>
      <!--主区域END-->

      <!--页脚-->
      <el-footer>
        <div class="footer">
          <div class="bottom-box-top">
            <ul class="bottom-box-info1">
              购物指南
              <li>购物流程</li>
              <li>常见问题</li>
              <li>会员介绍</li>
              <li>联系客服</li>
            </ul>
            <ul class="bottom-box-info2">
              配送方式
              <li>上门自提</li>
              <li>海外配送</li>
              <li>配送服务查询</li>
              <li>配送费收取标准</li>
            </ul>
            <ul class="bottom-box-info3">
              支付方式
              <li>货到付款</li>
              <li>在线支付</li>
              <li>分期付款</li>
              <li>公司转账</li>
            </ul>
            <ul class="bottom-box-info4">
              售后保障
              <li>售后政策</li>
              <li>价格保护</li>
              <li>退款说明</li>
              <li>取消订单</li>
            </ul>
          </div>

          <div class="bottom-box-info5">
            <h3>联系我们</h3>
            <span class="qq-box">邮箱: 1821166153@qq.com</span>
            <span class="phone-box">电话: 18522631800</span>
            <span class="github-box">更多:
            <a href="https://github.com/Marary/Marary" style="color: black">https://github.com/Marary/Marary</a>
        </span>
            <span class="time-box">周一到周日6:00到22:00</span>
          </div>

          <hr>
          <div class="bottom-box-bottom">
            <span>© 2022 · 迈阿瑞 · ALL RIGHTS RESERVED · 湖南省长沙市 中南大学 软件工程2103班liosq组</span>
          </div>
        </div>
      </el-footer>
    </el-container>
    <div id="mask" v-if="visible" style="z-index: 9998;position:fixed;top:0;left:0;background-color: rgba(0, 0, 0, 0.5);width: 100%;height: 100%;"></div>
  </div>

</template>

<script>

import {mapActions, mapGetters, useStore} from "vuex";
import {Search, ShoppingCart} from "@element-plus/icons-vue";
import Login from "@/components/Login";
import Register from "@/components/Register";
import MyList from "@/components/MyList";
import {provide} from "vue";


export default {
  setup() {
    const store = useStore();
    return {
      store
    };
  },
  components: {Search,Login,Register,MyList,ShoppingCart},
  data() {
    return {
      register: false,//是否显示注册组件
      visible: false,//是否退出登录
      isUser:"",
      username:null,
      routerState:true
    };
  },
  provide(){
    return{
      reload:this.reload
    }
  },
  created() {
    //  判断是否登录
    if (localStorage.getItem("user")) {
      //  如果登录设置状态
      this.$store.commit("setUser", JSON.parse(localStorage.getItem("user")));
    }
  },
  computed: {
    ...mapGetters(["getUser", "getNum"])
  },
  watch: {
    //  获取登录状态
    getUser: function (val) {
      if (val === "") {
        //  用户没有登录
        this.$store.commit("setShoppingCart", []);
      } else {
        this.username = val.username;
        //  获取购物车信息
        const url = `${this.$target}/cart/${val.id}`;
        this.$axios.get(url).then(res => {
          if (res.data.status.toString() === "0") {
            // 0 为成功, 更新vuex购物车状态
            this.$store.commit("setShoppingCart", res.data.data);
          } else {
            // 提示失败信息
            this.notifyError(res.data.message);
          }
        }).catch(err => {
          return Promise.reject(err);
        });
      }
    }
  },
  methods: {
    ...mapActions(["setUser", "setShowLogin", "setShoppingCart"]),
    login() {
      // 点击登录按钮, 通过更改vuex的showLogin值显示登录组件
      this.setShowLogin(true);
    },
    // 退出登录
    logout() {
      this.visible = false;
      // 清空本地登录信息
      localStorage.setItem("user", "");
      // 清空vuex登录信息
      this.$store.commit("setUser", "");
      this.notifySucceed("成功退出登录");
    },
    // 接收注册子组件传过来的数据
    isRegister(val) {
      this.register = val;
    },
    showLogout() {
      this.visible = true;
      console.log(this.visible);
    },
    reload(){
      this.routerState = false;
      this.$nextTick(()=>{
        this.routerState = true;
      })
    }
  }

};

</script>

<style lang="less" scoped>
@import "assets/css/global.css";
@import "assets/less/index.less";
</style>
